<template>
  <div id="home">
      <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
      <tab-control :title="['新款','精选','热卖']" 
                          @tabClick="tabClick"
                          ref="tabControl1"
                          class="tab-control"
                          v-show="istabFixed"></tab-control>
          <scorll class="content" ref="scroll" :probe-type="3"
           @scroll="contentScroll" 
           :pull-up-load="true"
           @pullingUp="loadMore"
          >
            <home-swiper :banners="banners" @swipeimageload="swipeimageload"></home-swiper>
            <recommend-view :recommends="recommends"></recommend-view>
            <feature-view></feature-view>
            <tab-control :title="['新款','精选','热卖']" 
                          @tabClick="tabClick"
                          ref="tabControl2"
                          ></tab-control>
            <goods-list :goods="showGoods"></goods-list>  
          </scorll> 
          <back-top @click.native="backclick" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar'
import HomeSwiper from '@/views/home/childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView'
import TabControl from '@/components/content/tabcontrol/TabControl'
import GoodsList from '@/components/content/goods/GoodsList'
import Scorll from '@/components/common/scoll/Scoll'
import BackTop from '@/components/content/backTop/BackTop'


import {getHomeMultidata,getHomeGoods} from '@/network/home'
import {debounce} from '@/common/utils.js'



  export default {
    name: "Home",
    components:{
      NavBar,
      HomeSwiper,
      RecommendView,
      TabControl,
      FeatureView,
      Scorll,
      BackTop,
      GoodsList,
      
    },
    data() {
      return {
        banners:[],
        recommends:[],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]},
        },
        currentType:'pop',
        isShowBackTop:false,
        taboffsetTop:0,
        istabFixed:false
      }
    },
    computed:{
        showGoods(){
          return this.goods[this.currentType].list
        }
    },
    created(){
      this.getHomeMultidata()
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
   
    },
    mounted() {


         const refresh = debounce(this.$refs.scroll.refresh,500)
         this.$bus.$on("itemImageLoad",()=>{
         refresh()
      })
    },
    methods: {
      backclick(){
        this.$refs.scroll.scrollTo(0,0)
        
      },
      swipeimageload(){
        this.taboffsetTop=this.$refs.tabControl2.$el.offsetTop
      },
      loadMore(){
        this.getHomeGoods(this.currentType)
      },
      contentScroll(position){
        this.isShowBackTop = position.y< -1000?true:false
        this.istabFixed = (-position.y)>this.taboffsetTop
      },   
      getHomeMultidata(){
        getHomeMultidata().then(res=>{
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      })
      },
      getHomeGoods(type){
        const page = this.goods[type].page+1
        getHomeGoods(type,page).then(data=>{
        this.goods[type].list.push(...data.data.list)
        this.goods[type].page +=1
        this.$refs.scroll.finishpullup()
      })
      },
     
      tabClick(index){
        switch(index){
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
        }
      this.$refs.tabControl1.cruntindex = index
      this.$refs.tabControl2.cruntindex = index

      }
    },

  }
</script>

<style scoped>
#home{
  
  height: 100vh;
  position: relative;
}
.home-nav{
  background-color: var(--color-tint);
  color:white;

}
.tab-control{
 position: relative;
  z-index: 9;
}

.content{
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 44px;
  left: 0;
  right: 0;
}


</style>
